import React from 'react'
import { Form, Input, Button, DatePicker, Select } from 'antd'
import { disabledStartDate, disabledEndDate } from '../batchRecord/Search'

const FormItem = Form.Item
const { Option } = Select

const TemplateSearch = (props) => {
  const { getFieldDecorator } = props.form
  const { 
    template,
    status,
    templateStatusEnum,
    startTime,
    endTime,
    onChangeTemplate,
    onChangeStatus,
    onChangeStartTime,
    onChangeEndTime,
    onSearch,
    onAdd,
  } = props
  const layout = { style:{ width: 120 } }
  return (
    <Form layout="inline" style={{ padding: 24 }}>
      <FormItem label="模板内容" >
        <Input placeholder="模板内容"  {...layout} value={template} onChange={onChangeTemplate} />
      </FormItem>
      <FormItem label="状态">
        <Select {...layout} value={status}  onChange={onChangeStatus}>
          <Option key="all" value={null}>全部</Option>
          {templateStatusEnum.map(({desc, index}) => <Option value={index} key={index}>{desc}</Option> )}
        </Select>
      </FormItem>
      <FormItem label="开始时间">
        <DatePicker {...layout} defaultValue={startTime} onChange={onChangeStartTime} disabledDate={disabledStartDate.bind(null, endTime)} />
      </FormItem>
      <FormItem label="结束时间">
        <DatePicker {...layout} defaultValue={endTime} onChange={onChangeEndTime} disabledDate={disabledEndDate.bind(null, startTime)} />
      </FormItem>
      <FormItem>
        <Button type="primary" onClick={onSearch}>查询</Button>
      </FormItem>
      <FormItem>
        <Button type="primary" onClick={onAdd}>添加</Button>
      </FormItem>
    </Form>
  )
}

export default Form.create()(TemplateSearch)